<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置新密码</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/loginAndRegister.css"/>
	</head>
	<body class="login findBackPw resetingPw">
		<!--登录模块头部 start-->
		<div class="loginHead">
			<div class="loginHeadContent">
				<div class="fl">
					<a href="javascript:void(0);"><img src="../img/indexLogoWhite.png" class="indexLogo"/></a>
				</div>
				<div class="fr">
					<div class="aGroup">
						<a class="loginMenu" href="javascript:void(0);">项目圈</a>
						<a class="loginMenu" href="javascript:void(0);">材料数据库</a>
						<a class="loginMenu" href="javascript:void(0);">计算工具</a>
						<div class="clear"></div>
					</div>
					<div class="btnGroup">
						<a class="btn" href="javascript:void(0);">注册</a>
						<a class="btn" href="javascript:void(0);">登录</a>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!--登录模块尾部 end-->
		
		<div class="loginContent">
			<div class="findBackPwForm">
				<div class="findBackPwFormContent">
					<div class="wid100 tac">
						<div class="tips">设置新密码</div>
						<div class="inputGroup">
							<input type="text" class="user userAccount" placeholder="请输入新密码（6-16位，区分大小写）"/>
							<div class="helpTips"></div>
						</div>
						<div class="inputGroup">
							<input type="password" class="user userPw" placeholder="确认新密码"/>
							<div class="helpTips"></div>
						</div>
						<button class="nextStep" @click="verification">确定</button>
					</div>
				</div>
			</div>
		</div>
		
		<!--尾部 start-->
		<div class="footer">Copyright © 2008 - 2017 深圳市建筑科学研究院 All Rights Reserved</div>
		<!--尾部 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var loginContentMinHeight = $(window).innerHeight() - 80;
			$('.loginContent').css('min-height',loginContentMinHeight + 'px');
			
			//获取body高度
			var bodyMinHeight = $('.loginContent').height() + 80;
			$('body').css('min-height',bodyMinHeight + 'px');
		});
		
		var login = new Vue({
			el:'.loginContent',
			methods:{
				downCount:function(){
					var i = 60;
					var startDownCount = setInterval(function(){
						i = --i;
						if(i > 0){
							document.querySelector('.sentCode').innerHTML = i + "s";
							console.log(i);
						}else if(i == 0){
							clearInterval(startDownCount);
							document.querySelector('.sentCode').innerHTML = "再次发送";
						}
					},1000);
				},
				removeDisable:function(){
					var codeNum = document.querySelector('.codeNum');
					var nextStep = document.querySelector('.nextStep');
					if(codeNum.value.length > 4){
						nextStep.classList.remove('disabled');
						nextStep.removeAttribute('disabled');
					}
				},
				verification:function(){
					var userAccountVal = document.querySelector('.userAccount').value;
					var userPwVal = document.querySelector('.userPw').value;
					if(!userAccountVal.match(/^[_0-9a-zA-Z]{6,16}$/)){
						document.querySelector('.userAccount').nextElementSibling.innerHTML = '请输入6-16位的新密码，并区分大小写';
					}else{
						document.querySelector('.userAccount').nextElementSibling.innerHTML = "";
					}
					if(userPwVal != userAccountVal){
						document.querySelector('.userPw').nextElementSibling.innerHTML = "请输入相同的密码";
					}else{
						document.querySelector('.userPw').nextElementSibling.innerHTML = "";
					}
				}
			}
		});
	</script>
</html>
